<template>
	<view class="page">
		<u-navbar leftIcon=" " :placeholder="true">
			<!-- 搜索 -->
			<!-- #ifdef MP-WEIXIN -->
			<uni-search-bar
			style="width: 500rpx;"
			slot="left"
			placeholder="商品搜索" 
			:radius="20" 
			:disabled="true" 
			@searchClick="onSearch" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<uni-search-bar
			style="width: 700rpx;"
			slot="center"
			placeholder="商品搜索" 
			:radius="20" 
			:disabled="true" 
			@searchClick="onSearch" />
			<!-- #endif -->
		</u-navbar>
		<l-loading v-if="!loadEnd" />
		<view class="box" v-else>
			<view class="left-box">
				<view class="item" 
				@tap="changeCategory(item,index)"
				:class="currentIndex === index ? 'active' : ''"
				v-for="(item,index) in categoryList" 
				:key="item.cat_id">
					{{item.cat_name}}
				</view>
			</view>
			<view class="right-box">
				<view class="swiper-item" v-if="currentCategory">
					<image class="banner" :src="currentCategory.image"></image>
					<view class="divider">
						<u-divider :text="currentCategory.cat_name + '分类'"></u-divider>
					</view>
					<view class="list-box">
						 <u-grid
							:border="false"
							@click="goDetail"
						>
							<u-grid-item
								v-for="(baseListItem,baseListIndex) in currentCategory.list"
								:key="baseListIndex"
							>
								<image class="cat-icon" :src="baseListItem.pic"></image>
								<text class="grid-text">{{baseListItem.cat_name}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>
		<tab-bar/>
	</view>
</template>

<script>
	import {getCategoryApi} from '@/api/category.js'
	export default {
		data() {
			return {
				categoryList: [],
				currentIndex: 0,
				currentCategory: {},
				loadEnd: false
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getListData()
		},
		methods: {
			onSearch() {
				uni.navigateTo({
					url: '/pages/aPackage/goodsSearch/goodsSearch'
				})
			},
			goDetail(index) {
				const {cat_id = ''} = this.currentCategory.list[index]
				uni.navigateTo({
					url: `/pages/aPackage/categoryList/categoryList?cat_id=${cat_id}&index=${index}`
				})
			},
			changeCategory({cat_id},index) {
				this.currentIndex = index
				this.getListData(cat_id)
			},
			// 获取分类
			async getListData(cat_id = '') {
				const res = await getCategoryApi({cat_id})
				if(this.categoryList.length === 0) {
					this.categoryList = res.data.cat_list
				}
				this.loadEnd = true
				this.$set(this.currentCategory,'cat_name',res.data.this_cat.cat_name)
				this.$set(this.currentCategory,'image',res.data.this_cat.banner_url)
				this.$set(this.currentCategory,'list', res.data.cat_item.child_menu)
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
	height: 100%;
}
.box {
	display: flex;
	justify-content: space-between;
	flex: 1;
	.left-box {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		.item {
			padding: 30rpx 0;
			font-size: 28rpx;
			color: #333333;
			border-left-width: 4rpx;
			border-left-color: #ffffff;
			border-left-style: solid;
			padding-left: 20rpx;
		}
		.active {
			color: #E81526;
			border-left-color: #E81526;
		}
	}
	.right-box {
		width: 550rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		.swiper-item {
			height: 100%;
			.banner {
				width: 100%;
				height: 200rpx;
			}
			.divider {
				padding: 20rpx 80rpx;
				box-sizing: border-box;
			}
			.list-box {
				.cat-icon {
					width: 100rpx;
					height: 100rpx;
				}
				.grid-text {
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
					padding-bottom: 20rpx;
				}
			}
		}
	}
}
</style>